<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="icon fa fa-arrow-left fa-gray"></text>
      </view>
      <view class="nav-title">个人档案</view>
    </view>

    <!-- 主内容 -->
    <scroll-view scroll-y class="content">
      <view class="profile-items-list">
        <!-- 最近 -->
        <view class="profile-item" @tap="handleItemClick('recent')">
          <view class="item-content">
            <view class="item-icon item-icon-blue">
              <text class="icon fa fa-clock-o fa-blue"></text>
            </view>
            <text class="item-text">最近</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 培训记录 -->
        <view class="profile-item" @tap="handleItemClick('training')">
          <view class="item-content">
            <view class="item-icon item-icon-green">
              <text class="icon fa fa-graduation-cap fa-green"></text>
            </view>
            <text class="item-text">培训记录</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 院内考核 -->
        <view class="profile-item" @tap="handleItemClick('assessment')">
          <view class="item-content">
            <view class="item-icon item-icon-amber">
              <text class="icon fa fa-check-circle-o fa-amber fa-orange"></text>
            </view>
            <text class="item-text">院内考核</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 证件信息 -->
        <view class="profile-item" @tap="handleItemClick('credentials')">
          <view class="item-content">
            <view class="item-icon item-icon-purple">
              <text class="icon fa fa-id-card-o fa-purple"></text>
            </view>
            <text class="item-text">证件信息</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 论文/著作 -->
        <view class="profile-item" @tap="handleItemClick('publications')">
          <view class="item-content">
            <view class="item-icon item-icon-indigo">
              <text
                class="icon fa fa-book fa-indigo"
                style="color: rgb(79 70 229)"
              ></text>
            </view>
            <text class="item-text">论文/著作</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 课题/科研 -->
        <view class="profile-item" @tap="handleItemClick('research')">
          <view class="item-content">
            <view class="item-icon item-icon-teal">
              <text class="icon fa fa-flask fa-teal fa-green"></text>
            </view>
            <text class="item-text">课题/科研</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 总结/报告 -->
        <view class="profile-item" @tap="handleItemClick('reports')">
          <view class="item-content">
            <view class="item-icon item-icon-rose">
              <text class="icon fa fa-file-text-o fa-rose fa-red"></text>
            </view>
            <text class="item-text">总结/报告</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 获奖信息 -->
        <view class="profile-item" @tap="handleItemClick('awards')">
          <view class="item-content">
            <view class="item-icon item-icon-yellow">
              <text class="icon fa fa-trophy fa-yellow fa-yellow"></text>
            </view>
            <text class="item-text">获奖信息</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 培训信息 -->
        <view class="profile-item" @tap="handleItemClick('training-info')">
          <view class="item-content">
            <view class="item-icon item-icon-cyan">
              <text
                class="icon fa fa-train fa-cyan"
                style="color: rgb(8 145 178)"
              ></text>
            </view>
            <text class="item-text">培训信息</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 继续教育 -->
        <view
          class="profile-item"
          @tap="handleItemClick('continuing-education')"
        >
          <view class="item-content">
            <view class="item-icon item-icon-emerald">
              <text
                class="icon fa fa-graduation-cap fa-emerald fa-green"
              ></text>
            </view>
            <text class="item-text">继续教育</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 参会信息 -->
        <view class="profile-item" @tap="handleItemClick('conferences')">
          <view class="item-content">
            <view class="item-icon item-icon-orange">
              <text class="icon fa fa-users fa-orange"></text>
            </view>
            <text class="item-text">参会信息</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 其他考试/比赛信息 -->
        <view class="profile-item" @tap="handleItemClick('competitions')">
          <view class="item-content">
            <view class="item-icon item-icon-red">
              <text class="icon fa fa-map-o fa-red"></text>
            </view>
            <text class="item-text">其他考试/比赛信息</text>
          </view>
          <text class="icon-right">›</text>
        </view>

        <!-- 其他文件 -->
        <view
          class="profile-item profile-item-last"
          @tap="handleItemClick('files')"
        >
          <view class="item-content">
            <view class="item-icon item-icon-gray">
              <text class="icon fa fa-folder-open fa-gray"></text>
            </view>
            <text class="item-text">其他文件</text>
          </view>
          <text class="icon-right">›</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  onLoad() {
    // 获取系统状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 导航方法
    goToHome() {
      uni.navigateTo({
        url: "/pages/home/home",
      });
    },
    goToWorkbench() {
      uni.navigateTo({
        url: "/pages/workbench/workbench",
      });
    },

    // 处理列表项点击
    handleItemClick(type) {
      uni.showToast({
        title: "功能开发中",
        icon: "none",
      });
      // 根据不同的类型跳转到不同的详情页
      // switch(type) {
      //   case 'recent':
      //     uni.navigateTo({ url: '/pages/profile/recent' })
      //     break
      //   case 'training':
      //     uni.navigateTo({ url: '/pages/profile/training' })
      //     break
      //   // ... 其他类型
      // }
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #f9fafb;
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 44px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.icon-back {
  font-size: 24px;
  color: #6b7280;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}

/* 主内容 */
.content {
  flex: 1;
  padding: 16px;
  padding-bottom: 70px;
  box-sizing: border-box;
}

.profile-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 档案项 */
.profile-item {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-item-last {
  margin-bottom: 16px;
}

.item-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon {
  font-size: 16px;
}

/* 图标颜色变量 */
.item-icon-blue {
  background-color: #dbeafe;
}

.item-icon-green {
  background-color: #d1fae5;
}

.item-icon-amber {
  background-color: #fef3c7;
}

.item-icon-purple {
  background-color: #ede9fe;
}

.item-icon-indigo {
  background-color: #e0e7ff;
}

.item-icon-teal {
  background-color: #ccfbf1;
}

.item-icon-rose {
  background-color: #ffe4e6;
}

.item-icon-yellow {
  background-color: #fef9c3;
}

.item-icon-cyan {
  background-color: #cffafe;
}

.item-icon-emerald {
  background-color: #d1fae5;
}

.item-icon-orange {
  background-color: #fed7aa;
}

.item-icon-red {
  background-color: #fee2e2;
}

.item-icon-gray {
  background-color: #f3f4f6;
}

.item-text {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
}

.icon-right {
  font-size: 20px;
  color: #d1d5db;
}

/* 底部导航栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid #f3f4f6;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.tabbar-icon {
  font-size: 22px;
}

.tabbar-text {
  font-size: 12px;
  color: #6b7280;
}

.tabbar-text-active {
  color: #2563eb;
  font-weight: 500;
}

.tabbar-item-active {
  color: #2563eb;
}
</style>
